<template>
		<uni-nav-bar left-text="成都" @click-left='toCity' right-text="搜索">
		<view class="input-view">
			<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
			<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
		</view>
	</uni-nav-bar>
	<view id="store">

		<!-- 		<view class="search">
			<input type="text" value="" placeholder="输入你要搜索的门店" auto-blur="true" cursor-spacing="20px">
			<button size="mini" type="primary">搜索</button>
		</view> -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">预留banner位置1</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">预留banner位置1</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">预留banner位置1</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="details" v-for="v in sotre" :key="v.name">
			<img :src="v.img"
				alt="">
			<view class="storeText">
				<view>{{v.name}}</view>
				<view class="address">
					<img
						src="https://cdn3.axureshop.com/demo/1509778/images/%E8%87%AA%E4%B9%A0%E5%AE%A4%E9%A6%96%E9%A1%B5/u70.svg">
					<text>{{v.address}}</text>
					<view class="distance">
						<text style="color: #c6964f;">"距离我"{{v.distance}}</text>
						<view>
							<img src="https://cdn3.axureshop.com/demo/1509778/images/%E5%88%87%E6%8D%A2%E9%97%A8%E5%BA%97/u1868.svg"
								alt="">
						</view>
						<view>
							<img src="https://cdn3.axureshop.com/demo/1509778/images/%E5%88%87%E6%8D%A2%E9%97%A8%E5%BA%97/u1869.svg"
								alt="">
						</view>
					</view>

				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				//轮播
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				sotre:[
					{
						img:"https://cdn3.axureshop.com/demo/1509778/images/%E5%88%87%E6%8D%A2%E9%97%A8%E5%BA%97/u1862.svg",
						name:"小气自习室-卧龙凤雏店",
						address:"福建省福州市台江区鼓楼街道景江镇天厝路350-5号",
						distance:"300m"
					},
					{
						img:"https://cdn3.axureshop.com/demo/1509778/images/%E5%88%87%E6%8D%A2%E9%97%A8%E5%BA%97/u1906.svg",
						name:"小气自习室-双流店",
						address:"福建省福州市台江区鼓楼街道景江镇天厝路350-5号",
						distance:"500m"
					},
					{
						img:"https://cdn3.axureshop.com/demo/1509778/images/%E5%88%87%E6%8D%A2%E9%97%A8%E5%BA%97/u1907.svg",
						name:"小气自习室-武侯店",
						address:"福建省福州市台江区鼓楼街道景江镇天厝路350-5号",
						distance:"1.5km"
					},
					{
						img:"https://cdn3.axureshop.com/demo/1509778/images/%E5%88%87%E6%8D%A2%E9%97%A8%E5%BA%97/u1862.svg",
						name:"小气自习室-高新店",
						address:"福建省福州市台江区鼓楼街道景江镇天厝路350-5号",
						distance:"1.8km"
					},
				]

			}
		},
		methods:{
			toCity:function(){
				console.log(1);
			}
		}
	}
</script>

<style lang="less">
	#store {
		width: 750rpx;

		.search {
			width: 90%;
			background-color: #f2f2f2;
			height: 60rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 20rpx;

			button {
				margin: 0;

			}

			input {
				margin-left: 30rpx;
			}
		}

		//详情卡
		.details {

			width: 90%;
			height: 200rpx;
			border-radius: 10rpx;
			margin: 20rpx auto;
			background-color: #f1e5d4;
			display: flex;
			align-items: center;

			image {
				margin-left: 10rpx;
				width: 260rpx;
				height: 170rpx;
			}

			.storeText {
				margin-left: 20rpx;
				height: 170rpx;

				:nth-child(1) {
					font-weight: 700;
					font-style: normal;
					font-size: 14px;
					text-align: left;
				}

				.address {
					width: 360rpx;
					font-size: 12px;
					color: #7F7F7F;
					line-height: 20px;

					image {
						width: 30rpx;
						height: 35rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}

					.distance {
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;

						view {
							cursor: pointer;
							width: 40rpx;
							height: 40rpx;
							background: #c6964f;
							border-radius: 50%;
							text-align: right;
							line-height: 37rpx;

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}
				}
			}
		}


		// 轮播
		.uni-margin-wrap {
			width: 690rpx;
			width: 100%;
		}

		.swiper {
			height: 180rpx;
			width: 90%;
			margin: 20rpx auto;
		}

		.swiper-item {
			display: block;
			height: 180rpx;
			line-height: 180rpx;
			text-align: center;
			background-color: #717171;
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}

		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}

		.info {
			position: absolute;
			right: 20rpx;
		}

		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}

	}
</style>
<style lang="scss">
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>
